<template>
  <div class="order-management">
    <h2 style="color: white;">订单管理</h2>
    <div class="search-area">
      <a-input v-model:value="searchQuery.orderId" placeholder="订单号" class="search-input" />
      <a-input v-model:value="searchQuery.customer" placeholder="顾客姓名" class="search-input" />
      <a-input v-model:value="searchQuery.business" placeholder="商家" class="search-input" />
      <a-input v-model:value="searchQuery.postman" placeholder="配送人" class="search-input" />
      <a-input v-model:value="searchQuery.status" placeholder="状态" class="search-input" />
      <a-button type="primary" @click="handleSearch">搜索</a-button>
    </div>
    <table class="order-table">
      <thead>
        <tr>
          <th>订单号</th>
          <th>商品名</th>
          <th>顾客姓名</th>
          <th>数量</th>
          <th>金额</th>
          <th>开始日期</th> <!-- 新增开始日期列 -->
          <th>配送人</th>
          <th>邮费</th>
          <th>商家</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <OrdersRow v-for="order in orders" :key="order.orderId" :order="order" @deleted="fetchOrders" />
      </tbody>
    </table>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';
import OrdersRow from './OrdersRow.vue';
import request from '../../../util/request';

export default {
  name: 'AllOrdersManager',
  components: {
    OrdersRow,
  },
  setup() {
    const searchQuery = ref({
      orderId: '',
      customer: '',
      business: '',
      postman: '',
      status: '',
    });

    const orders = ref([]);

    onMounted(() => {
      fetchOrders();
    })

    const fetchOrders = () => {
      request.get('order/getAll').then(res => {
        const ol = res.data.ol;
        const pl = res.data.pl;
        const bl = res.data.bl;
        const cl = res.data.cl;
        orders.value = ol.map((o, i) => ({
          ...o,
          prodName: pl[i].prodName,
          cusName: cl[i],
          busName: bl[i],
          orderPrice: pl[i].prodPrice * o.orderBuyCount
        }));
      }).catch(err => {
        console.error("获取订单失败：", err);
      });
    };
      

    const handleSearch = () => {
      request.post('/order/search', {
        orderid: searchQuery.value.orderId,
        cusname: searchQuery.value.customer,
        busname: searchQuery.value.business,
        postman: searchQuery.value.postman,
        status: searchQuery.value.status,
      }).then(res => {
        const ol = res.data.ol;
        const pl = res.data.pl;
        const bl = res.data.bl;
        const cl = res.data.cl;
        orders.value = ol.map((o, i) => ({
          ...o,
          prodName: pl[i].prodName,
          cusName: cl[i],
          busName: bl[i],
          orderPrice: pl[i].prodPrice * o.orderBuyCount
        }));
      }).catch(err => {
        console.error("搜索失败：", err);
      });
    };

    return {
      orders,
      fetchOrders,
      searchQuery,
      handleSearch,
    };
  },
};
</script>

<style scoped>
.order-management {
  padding: 24px;
  background: #1a1a1a; /* 暗色背景 */
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  color: #ffffff; /* 字体颜色为白色 */
}

.order-table {
  width: 100%;
  border-collapse: collapse;
}

.search-area {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.search-input {
  width: 160px;
}

.order-table th,
.order-table td {
  padding: 12px;
  border: 1px solid #ffffff;
  text-align: left;
}

.order-table th {
  background: rgba(255, 255, 255, 0.1); /* 微透明背景 */
}
</style>
